<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IOS 3dTouch</title>
    <link rel="stylesheet" href="3d.css">
</head>
<body>
    <div class="sloth" id="sloth"></div>
    <p class="info">Force:<span id="force_val"></span></p>
    <div class="btn_wrap">
        <div class="btn_mask" id="btn_mask"></div>
        <div class="force_btn" id="force_btn"></div>
    </div>
</body>
<script>
    let i = 0,j = 0;
    const sloth = document.getElementById('sloth'),
          mask = document.getElementById('btn_mask');
    setInterval(() => {
        if(j >= 6){
            i = 0;
            j = 0;
        }
        if(i >= 3){
            j++;
            i = 0;
        }else{
            i++;
            sloth.style.backgroundPosition = `-${i*247}px -${j*194}px`;
        }
        // console.log(i,j);        
        mask.style.transform = `scale(${(((j*4+i)/24)*1.7)})`
    },50)
</script>
</html>